<template>
  <Transition name="fade" appear>
    <view v-if="props.isDisplay" class="loading fx-col-c">
      <view class="loading-icon">
        <uv-loading mode="circle" :color="color.colorC" :size="props.size"></uv-loading>
      </view>
      <view class="loading-text">{{props.text}}</view>
    </view>
  </Transition>
</template>
<script setup>
import {ref} from 'vue'
import {color} from "@/enums/constants";

const props = defineProps({
  isDisplay:{
    type:Boolean,
    default:true
  },
  size:{
    type:Number,
    default:50
  },
  text:{
    type:String,
    default:'正在加载...'
  }
});


</script>

<style lang="scss" scoped>

.loading{
  position: fixed;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  font-size: 26rpx;
  text-align: center;
  background-color:rgba(24,24,24,0.5);
  border-radius: 13rpx;
  padding:20rpx 30rpx;
  &-icon{}
  &-text{
    margin-top: 15rpx;
    color:$main-text-e;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}

</style>
